<template>
  <div>
    <sub-header title="会员中心" :isBack="false"></sub-header>
    <div class="user-info-wrap">
      <div class="head"><img :src="head" alt=""/></div>
      <div class="nickname">{{ nickname }}</div>
      <div class="points">我的积分：{{ points }}</div>
    </div>
    <div class="order-name-wrap">
      <div class="order-name">全部订单</div>
      <div class="show-order" @click="$router.push({ name: 'my-order' })">查看全部订单 &gt;</div>
    </div>
    <div class="order-status-wrap">
      <div class="item" @click="$router.push({ name: 'order-list', query: { status: '0' } })">
        <div class="icon wait"></div>
        <div class="text">待支付</div>
      </div>
      <div class="item" @click="$router.push({ name: 'order-list', query: { status: '1' } })">
        <div class="icon take"></div>
        <div class="text">待收货</div>
      </div>
      <div class="item" @click="$router.push({ name: 'order-review', query: { status: '2' } })">
        <div class="icon comment"></div>
        <div class="text">待评价</div>
      </div>
    </div>
    <div class="menu-list-wrap">
      <ul @click="$router.push({ name: 'profile' })">
        <li>个人资料</li>
        <li></li>
      </ul>
      <ul @click="$router.push({ name: 'user-address' })">
        <li>收货地址</li>
        <li></li>
      </ul>
      <ul @click="$router.push({ name: 'cellphone' })">
        <li>绑定手机</li>
        <li></li>
      </ul>
      <ul @click="$router.push({ name: 'password' })">
        <li>修改密码</li>
        <li></li>
      </ul>
      <ul @click="$router.push({ name: 'fav' })">
        <li>我的收藏</li>
        <li></li>
      </ul>
      <div class="btn" @click="logout" v-if="isLogin">退出登录</div>
      <div class="btn" @click="goPage('/login')" v-else>登录/注册</div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import SubHeader from 'components/SubHeader'
import { userData } from '../../../api/user'

export default {
  name: 'my',
  data () {
    return {
      nickname: '昵称',
      points: 0,
      head: require('assets/images/user/my/default-head.png')
    }
  },
  methods: {
    ...mapActions({
      safeOut: 'user/logout',
      loginCheck: 'user/loginCheck'
    }),
    goPage (url) {
      this.$router.push(url)
    },
    getUserInfo () {
      userData(this.uid).then(res => {
        if (res.code === 200) {
          this.nickname = res.data.nickname
          this.points = res.data.points
          if (res.data.head !== '') {
            this.head = res.data.head
          }
        }
      })
    },
    async logout () {
      await this.$dialog
        .confirm({
          message: '确定要退出登录？'
        })
        .then(async () => {
          let safeOut = await this.safeOut()
          if (safeOut.code === 200) {
            this.$toast('已退出登录')
            this.nickname = '昵称'
            this.points = 0
            this.head = require('assets/images/user/my/default-head.png')
          } else {
            this.$toast(safeOut.data)
          }
        })
        .catch(() => {})
    }
  },
  computed: {
    ...mapState({
      isLogin: state => state.user.isLogin,
      uid: state => state.user.uid
    })
  },
  async created () {
    if (this.isLogin) {
      let isLogin = await this.loginCheck()
      if (isLogin) {
        this.getUserInfo()
      }
    }
    document.title = this.$route.meta.title
  },
  components: {
    SubHeader
  }
}
</script>

<style scoped>
  .sub-header {
    width: 100%;
    height: 1rem;
    background-color: #ffffff;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    border-bottom: 1px solid #efefef;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
  }

  .sub-header .back {
    width: 0.8rem;
    height: 0.8rem;
    background-image: url('../../../assets/images/home/goods/back.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .sub-header .title {
    width: 79%;
    height: auto;
    font-size: 0.32rem;
    text-align: center;
  }

  .sub-header .right-btn {
    width: auto;
    height: auto;
    font-size: 0.32rem;
  }

  .user-info-wrap {
    width: 100%;
    height: 2.8rem;
    background-image: url('../../../assets/images/user/my/mybg.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
    margin-top: 1.02rem;
    position: relative;
    z-index: 1;
  }

  .user-info-wrap .head {
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    z-index: 1;
    left: 5%;
    bottom: 15%;
  }

  .user-info-wrap .head img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
  }

  .user-info-wrap .nickname {
    width: auto;
    height: auto;
    white-space: nowrap;
    position: absolute;
    z-index: 1;
    left: 27%;
    bottom: 35%;
    font-size: 0.24rem;
    color: #ffffff;
  }

  .user-info-wrap .points {
    width: auto;
    height: auto;
    white-space: nowrap;
    position: absolute;
    z-index: 1;
    left: 27%;
    bottom: 20%;
    font-size: 0.24rem;
    color: #ffffff;
  }

  .order-name-wrap {
    width: 100%;
    height: 0.8rem;
    background-color: #ffffff;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    overflow: hidden;
    margin-bottom: 1px;
  }

  .order-name-wrap .order-name {
    font-size: 0.28rem;
    margin-left: 3%;
  }

  .order-name-wrap .show-order {
    font-size: 0.24rem;
    margin-right: 3%;
  }

  .order-status-wrap {
    width: 80%;
    height: 1.4rem;
    background-color: #ffffff;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    padding-left: 10%;
    padding-right: 10%;
  }

  .order-status-wrap .item {
    width: 1rem;
    height: auto;
  }

  .order-status-wrap .item .icon {
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 auto;
  }

  .order-status-wrap .item .icon.wait {
    background-image: url('../../../assets/images/user/my/pay.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .order-status-wrap .item .icon.take {
    background-image: url('../../../assets/images/user/my/shouhuo.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .order-status-wrap .item .icon.comment {
    background-image: url('../../../assets/images/user/my/comment.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .order-status-wrap .item .text {
    width: 100%;
    font-size: 0.24rem;
    text-align: center;
  }

  .menu-list-wrap {
    width: 100%;
    height: 7rem;
    background-color: #ffffff;
    margin-top: 0.3rem;
  }

  .menu-list-wrap ul {
    width: 87%;
    height: 0.8rem;
    border-bottom: 1px solid #efefef;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    padding-left: 10%;
    padding-right: 3%;
  }

  .menu-list-wrap ul li:nth-child(1) {
    font-size: 0.32rem;
  }

  .menu-list-wrap ul li:nth-child(2) {
    width: 0.4rem;
    height: 0.4rem;
    background-image: url('../../../assets/images/common/right_arrow.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .menu-list-wrap .btn {
    width: 70%;
    height: 0.8rem;
    margin: 0 auto;
    background-color: #e51b19;
    border-radius: 5px;
    font-size: 0.32rem;
    color: #ffffff;
    text-align: center;
    line-height: 0.8rem;
    margin-top: 0.4rem;
  }
</style>
